import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'

function Text({ name, change, list, init }) {
    useEffect(() => {
        init()
    }, [])
    return (
        <div>
            我的名字叫: {name}
            <button onClick={change}>修改</button>
            <ul>
                {
                    list.map((item, index) => {
                        return <li key={index}>
                            {item.floor_title ? item.floor_title.name : ''}
                        </li>
                    })
                }
            </ul>
        </div>
    )
}


// 映射  redux中的数据 到 当前组件的Props上
const mapStateToProps = ({ name, list }) => {
    return {
        name,
        list
    }
}

// 映射 修改数据的方法到 当前组件的Props上
// 使用了mapDispatchToProps后 Props获取不到dispatch
const mapDispatchToProps = (dispatch) => {
    return {
        change() {
            dispatch({ type: "CHANGE_NAME" })
        },
        init() {
            // dispatch 
            dispatch((next) => {
                axios.get("https://api-hmugo-web.itheima.net/api/public/v1/home/floordata").then(res => {
                    // dispatch  经过redux-thunk修改以后的dispatch
                    // next      原来的dispatch
                    next({ type: "INIT_LIST", data: res.data.message })
                })
            })
        }
    }
}

Text = connect(mapStateToProps, mapDispatchToProps)(Text)

export default Text
